<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 p-8">
    <div class="max-w-4xl mx-auto">
      <h1 class="text-4xl font-bold text-white mb-8">Tailwind CSS 测试页面</h1>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow-lg p-6">
          <h2 class="text-xl font-semibold text-gray-800 mb-4">蓝色卡片</h2>
          <p class="text-gray-600">这是一个测试卡片，用于验证Tailwind CSS是否正常工作。</p>
          <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition-colors">
            蓝色按钮
          </button>
        </div>
        
        <div class="bg-gradient-to-br from-green-400 to-blue-500 rounded-lg shadow-lg p-6 text-white">
          <h2 class="text-xl font-semibold mb-4">渐变卡片</h2>
          <p class="text-green-100">这个卡片有渐变背景。</p>
          <button class="mt-4 bg-white text-green-600 hover:bg-gray-100 px-4 py-2 rounded transition-colors">
            白色按钮
          </button>
        </div>
        
        <div class="bg-red-500 rounded-lg shadow-lg p-6 text-white">
          <h2 class="text-xl font-semibold mb-4">红色卡片</h2>
          <p class="text-red-100">如果你能看到这些颜色，说明Tailwind CSS工作正常。</p>
          <button class="mt-4 bg-yellow-400 hover:bg-yellow-500 text-red-800 px-4 py-2 rounded transition-colors">
            黄色按钮
          </button>
        </div>
      </div>
      
      <div class="mt-8 bg-white/20 backdrop-blur-sm rounded-lg p-6">
        <h2 class="text-2xl font-bold text-white mb-4">透明背景测试</h2>
        <p class="text-white/80">这个区域有半透明背景和模糊效果。</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 测试页面
</script>